/**
 *created by renwei on 2019/10/10
 */

import AMapJS from "amap-js";
import React, { useState, useEffect } from "react";
import { MapInfo } from "../../../utils/MapInfo";
import "./style.css";

export default function MyMap(props) {
  // map = null;
  const [MyMap, setMyMap] = useState(null);
  let map = null;

  const maxRadius = 21;
  const minRadius = 0;
  const step = 0.1;
  let radius = 21;
  let radius1 = 14;
  let radius2 = 7;

  //初始化地图
  const mapInit = () => {
    const aMapJSAPILoader = new AMapJS.AMapJSAPILoader({
      v: MapInfo.version,
      key: MapInfo.key
    });

    const aMapUILoader = new AMapJS.AMapUILoader({
      v: MapInfo.UIVersion // UI组件库版本号
    });

    aMapJSAPILoader.load().then(AMap => {
      aMapUILoader.load().then(initAMapUI => {
        const AMapUI = initAMapUI();
        // console.log(AMap);
        // console.log(AMapUI);
        map = new AMap.Map("map", {
          expandZoomRange: true,
          zooms: [18.5, 20], //级别
          center: [104.049256, 30.663006], //中心点坐标
          viewMode: "3D", //使用3D视图
          // pitch: 20, //设置角度
          mapStyle: "amap://styles/1f9825940198d449fe6dd1e3de66325b",
          dragEnable: true
          //   scrollWheel: false
        });

        //新建infoWindow
        const infoWindow = new AMap.InfoWindow({
          offset: new AMap.Pixel(0, -40)
        });

        AMapUI.loadUI(["overlay/SimpleMarker"], SimpleMarker => {
          const { data } = props;
          const marker = new SimpleMarker({
            //设置节点属性
            iconLabel: {
              //普通文本
              innerHTML: data.devState === "告警" ? "警" : null,
              //设置样式
              style: {
                color: "#fff",
                fontSize: "1rem",
                marginTop: "2px"
              }
            },
            iconStyle:
              data.devState === "告警"
                ? "red"
                : data.devState === "未激活" || data.devState === "激活失败"
                ? "orange"
                : "blue",
            map: map,
            position: [data.longitude, data.latitude]
          });

          const circle = new AMap.Circle({
            center: [data.longitude, data.latitude],
            radius: 0,
            // strokeColor: "#F33", //线颜色
            // strokeOpacity: 1, //线透明度
            strokeWeight: 0, //线粗细度
            fillColor:
              data.devState === "告警"
                ? "red"
                : data.devState === "未激活" || data.devState === "激活失败"
                ? "orange"
                : "#00BFFF" //填充颜色
            // fillOpacity: 0 //填充透明度
          });
          const circle1 = new AMap.Circle({
            center: [data.longitude, data.latitude],
            radius: 0,
            // strokeColor: "#F33", //线颜色
            // strokeOpacity: 0.7, //线透明度
            strokeWeight: 0, //线粗细度
            fillColor:
              data.devState === "告警"
                ? "red"
                : data.devState === "未激活" || data.devState === "激活失败"
                ? "orange"
                : "#00BFFF" //填充颜色
            // fillOpacity: 0 //填充透明度
          });
          const circle2 = new AMap.Circle({
            center: [data.longitude, data.latitude],
            radius: 0,
            // strokeColor: "#F33", //线颜色
            // strokeOpacity: , //线透明度
            strokeWeight: 0, //线粗细度
            fillColor:
              data.devState === "告警"
                ? "red"
                : data.devState === "未激活" || data.devState === "激活失败"
                ? "orange"
                : "#00BFFF" //填充颜色
            // fillOpacity: 0 //填充透明度
          });

          map.add(marker);
          map.add(circle);
          map.add(circle2);
          map.add(circle1);
          map.setFitView();
          // marker.content = "我是第个Marker";

          const animation = () => {
            if (radius > maxRadius) {
              radius = minRadius;
            } else {
              radius += step;
            }

            if (radius1 > maxRadius) {
              radius1 = minRadius;
            } else {
              radius1 += step;
            }

            if (radius2 > maxRadius) {
              radius2 = minRadius;
            } else {
              radius2 += step;
            }
            circle.setRadius(radius2);
            circle1.setRadius(radius1);
            circle2.setRadius(radius);
            if (radius >= 1)
              circle2.setOptions({ fillOpacity: 0.8 - radius / maxRadius });
            if (radius1 >= 1)
              circle1.setOptions({ fillOpacity: 0.8 - radius1 / maxRadius });

            if (radius2 >= 1)
              circle.setOptions({ fillOpacity: 0.8 - radius2 / maxRadius });
            AMap.Util.requestAnimFrame(animation);
          };

          animation();
          //marker的点击事件并显示出当前的infowindow
          marker.on("click", data => {
            infoWindow.setContent(data.target.content);
            infoWindow.open(map, data.target.getPosition());
            // animation();
            // cleanUp();
            // props.history.push("/login");
          });
        });
        // map.destroy();
        setMyMap(map);
      });
    });
  };

  //清空地图
  const cleanUp = () => {
    // console.log(MyMap);
    if (MyMap !== null) {
      MyMap.destroy();
    }
  };

  useEffect(() => {
    if (MyMap === null) mapInit();
    return () => {
      cleanUp();
    };
  });

  return (
    <div style={{ width: "100%", height: "100%" }}>
      <div
        id={"map"}
        style={{
          width: "100%",
          height: "100%"
        }}
      ></div>
    </div>
  );
}
